<template>
  <view class="address-edit">
    <view class="form">
      <view class="form-item">
        <text class="label">收货人</text>
        <input 
          v-model="form.name"
          type="text"
          placeholder="请输入收货人姓名"
          class="input"
        />
      </view>
      
      <view class="form-item">
        <text class="label">手机号码</text>
        <input 
          v-model="form.phone"
          type="number"
          maxlength="11"
          placeholder="请输入手机号码"
          class="input"
        />
      </view>
      
      <view class="form-item">
        <text class="label">所在地区</text>
        <picker 
          mode="region" 
          :value="[form.province, form.city, form.district]"
          @change="handleRegionChange"
          class="picker"
        >
          <view class="picker-value">
            {{ form.province || '请选择' }} {{ form.city }} {{ form.district }}
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <text class="label">详细地址</text>
        <textarea
          v-model="form.detail"
          placeholder="请输入详细地址"
          class="textarea"
        />
      </view>
      
      <view class="form-item">
        <text class="label">设为默认地址</text>
        <switch 
          :checked="form.isDefault"
          @change="handleDefaultChange"
          color="var(--td-brand-color)"
        />
      </view>
    </view>
    
    <view class="footer">
      <button class="btn-save" @tap="saveAddress">保存</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const form = ref({
  name: '',
  phone: '',
  province: '',
  city: '',
  district: '',
  detail: '',
  isDefault: false
})

onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const id = currentPage.options?.id
  
  if (id) {
    // 编辑模式，获取地址详情
    const address = uni.getStorageSync('addresses').find(a => a.id === parseInt(id))
    if (address) {
      form.value = { ...address }
    }
  }
})

const handleRegionChange = (e) => {
  const [province, city, district] = e.detail.value
  form.value.province = province
  form.value.city = city
  form.value.district = district
}

const handleDefaultChange = (e) => {
  form.value.isDefault = e.detail.value
}

const saveAddress = () => {
  // 表单验证
  if (!form.value.name) {
    return uni.showToast({
      title: '请输入收货人姓名',
      icon: 'none'
    })
  }
  if (!/^1\d{10}$/.test(form.value.phone)) {
    return uni.showToast({
      title: '请输入正确的手机号码',
      icon: 'none'
    })
  }
  if (!form.value.province) {
    return uni.showToast({
      title: '请选择所在地区',
      icon: 'none'
    })
  }
  if (!form.value.detail) {
    return uni.showToast({
      title: '请输入详细地址',
      icon: 'none'
    })
  }
  
  // 保存地址
  uni.showToast({
    title: '保存成功',
    icon: 'success'
  })
  
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}
</script>

<style lang="scss" scoped>
.address-edit {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;
}

.form {
  background: #fff;
  padding: 0 30rpx;
}

.form-item {
  display: flex;
  align-items: center;
  min-height: 100rpx;
  border-bottom: 2rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.label {
  width: 160rpx;
  font-size: 28rpx;
  color: #333;
}

.input {
  flex: 1;
  height: 100rpx;
  font-size: 28rpx;
}

.picker {
  flex: 1;
}

.picker-value {
  height: 100rpx;
  line-height: 100rpx;
  font-size: 28rpx;
  color: #333;
}

.textarea {
  flex: 1;
  height: 160rpx;
  font-size: 28rpx;
  padding: 20rpx 0;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.btn-save {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: var(--td-brand-color);
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
}
</style> 